'use client'
import './App.css'
import UseRefLol from "./page/useRefLol.tsx";
import FragmentLol from "./page/FragmentLol.tsx";
import ContextLol from "./page/contextLol.tsx";
import ContextLolClass from "./page/contextLolClass.tsx";
import PureComponentLol from "./page/PureComponentLol.tsx";
import TagSlot from "./page/tagSlot.tsx";
import ErrorCatch from "./page/ErrorCatch.tsx";

function App() {
    return (
        <div>
            <div className={"kuang"}>
                <h3>useRefLol</h3>
                <UseRefLol/>
            </div>
            <div className={"kuang"}>
                <h3>Fragment的使用</h3>
                <FragmentLol/>
            </div>
            <div className={"kuang"}>
                <h3>context跨层组件传递参数-函数组件</h3>
                <ContextLol/>
            </div>
            <div className={"kuang"}>
                <h3>context跨层组件传递参数-类组件</h3>
                <ContextLolClass/>
            </div>
            <div className={"kuang"}>
                <h3>集成PureComponent-优化页面渲染-类</h3>
                <h5>提示：主要打开开发面板查看log输出</h5>
                <PureComponentLol/>
            </div>
            <div className={"kuang"}>
                <h3>标签动态嵌入标签案例</h3>
                <h5>提示：利用的是props传递函数</h5>
                <TagSlot/>
            </div>
            <div className={"kuang"}>
                <h3>子组件错误捕捉</h3>
                <ErrorCatch/>
            </div>
        </div>
    )
}

export default App
